<template>
  <el-form :inline="true" :model="form" ref="form" :rules="rules" label-width="70px" id="selectForm" size="medium">
    <el-form-item v-for="item in formLabel" :key="item.model" :label="item.label" :prop="item.model">
      <el-input v-model="form[item.model]" v-if="!item.type" size="small"></el-input>
      <el-select v-model="form[item.model]" placeholder="请选择" v-if="item.type === 'select'" @change="selectChange" size="small" popper-class="select">
        <el-option v-for="option in item.children" :key="option.value" :label="option.label" :value="option.value"> </el-option>
      </el-select>
      <el-switch v-model="form[item.model]" v-if="item.type === 'switch'"> </el-switch>
      <el-date-picker
        v-model="form[item.model]"
        type="datetimerange"
        :picker-options="pickerOptions"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        placeholder="选择日期"
        :default-time="['00:00:00', '23:59:59']"
        v-if="item.type === 'date'"
        size="small"
      >
      </el-date-picker>
    </el-form-item>
    <el-form-item label="业务" label-width="90px" v-if="config.cascader" size="small">
      <el-cascader v-model="selectedKeys" :options="casecadeFormLabel" :props="casecadeProps" :show-all-levels="true" @change="handleChange"></el-cascader>
    </el-form-item>
    <el-form-item><slot></slot></el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      user_id: {
        model: 'user_id',
        label: '用户'
      },
      org_id: {
        model: 'org_id',
        label: '机构ID'
      },
      signature: {
        model: 'signature',
        label: '签名'
      },
      smg_code: {
        model: 'smg_code',
        label: '通道'
      },
      timerange: {
        model: 'timerange',
        label: '时段',
        type: 'date'
      },
      selectedKeys: [],
      optionxs: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则'
            },
            {
              value: 'name',
              label: 'alex'
            }
          ]
        }
      ],
      casecadeProps: {
        value: 'value',
        // label: 'label',
        expandTrigger: 'hover',
        // children: 'children',
        // checkStrictly: true
        emitPath: false
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '5分钟',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 0.083)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '15分钟',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 0.25)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '1小时',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 1)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '1天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '3天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '1周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '1个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '2个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 60)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  props: {
    inline: Boolean,
    form: Object,
    formLabel: Array,
    rules: Object,
    operateFormLabel: Array,
    casecadeFormLabel: Array,
    config: Object
  },
  methods: {
    handleChange() {
      console.log('--> before selectedKeys value', this.formLabel)
      // console.log('selectedKeys value', this.selectedKeys)
      this.form.sql = this.selectedKeys
      if (this.selectedKeys === '1分钟内') {
        console.log('1分钟内  ---------', this.formLabel)
        this.formLabel.splice(1, 4, this.smg_code)
      } else if (this.selectedKeys === 'phone2') {
        this.formLabel.splice(1, 4, {
          model: 'phone',
          label: 'phone'
        })
        this.formLabel.splice(2, 2, this.timerange)
      } else if (this.selectedKeys === 'success1' || this.selectedKeys === '回执率' || this.selectedKeys == 'xinyunxin2') {
        this.formLabel.splice(1, 5, this.timerange)
      } else if (this.selectedKeys === '省份通道成功率') {
        this.formLabel.splice(1, 3, this.smg_code)
        this.formLabel.splice(2, 2, {
          model: 'province',
          label: '省份'
        })
        this.formLabel.splice(4, 1, this.timerange)
      } else if (this.selectedKeys === '通道统计' || this.selectedKeys === 'subplatform2' || this.selectedKeys === 'success3') {
        this.formLabel.splice(1, 3, this.smg_code)
        this.formLabel.splice(2, 3, this.timerange)
      } else if (this.selectedKeys === 'subplatform3' || this.selectedKeys === 'subplatform4') {
        this.formLabel.splice(1, 3, this.smg_code)
        this.formLabel.splice(2, 3, {
          model: 'hh',
          label: 'hh24'
        })
        this.formLabel.splice(3, 3, {
          model: 'mi',
          label: 'mi'
        })
        this.formLabel.splice(4, 3, this.timerange)
      } else if (this.selectedKeys === 'xinyunxin1') {
        this.formLabel.splice(1, 3, {
          model: 'cust_no',
          label: 'CUST_NO'
        })
        this.formLabel.splice(2, 3, this.timerange)
      } else if (this.selectedKeys === '用户统计' || this.selectedKeys === 'subplatform1' || this.selectedKeys === 'success2') {
        this.formLabel.splice(1, 3, this.user_id)
        this.formLabel.splice(2, 3, this.timerange)
      } else if (this.selectedKeys === '多个签名') {
        this.formLabel.splice(1, 3, this.user_id)
        this.formLabel.splice(2, 3, this.smg_code)
        this.formLabel.splice(3, 3, this.timerange)
      } else if (this.selectedKeys === '内容规律' || this.selectedKeys === 'phone3') {
        this.formLabel.splice(1, 3, this.user_id)
        this.formLabel.splice(2, 3, {
          model: 'status',
          label: 'status'
        })
        this.formLabel.splice(3, 1, this.timerange)
      } else if (this.selectedKeys === 'area' || this.selectedKeys == 'default') {
        console.log('area 1111111111111111111111111111111111111')
        this.formLabel.splice(1, 1, this.smg_code)
        this.formLabel.splice(2, 1, this.user_id)
        this.formLabel.splice(3, 1, {
          model: 'status',
          label: '状态'
        })
        this.formLabel.splice(4, 1, {
          model: 'report_code',
          label: '状态报告'
        })
        this.formLabel.splice(5, 1, this.timerange)
      } else if (this.selectedKeys === '重推表') {
        this.formLabel.splice(1, 4)
      } else if (this.selectedKeys === 'sgip重推表' || this.selectedKeys === 'phone1') {
        this.formLabel.splice(1, 4, {
          model: 'phone',
          label: 'phone'
        })
      } else if (this.selectedKeys === 'check2') {
        this.formLabel.splice(1, 4)
      } else if (this.selectedKeys === '10分内') {
        this.formLabel.splice(1, 4, {
          model: 'check_person',
          label: 'Check Person'
        })
      } else if (this.selectedKeys === 'check1') {
        this.formLabel.splice(1, 4, {
          model: 'check_person',
          label: 'Check Person'
        })
        this.formLabel.splice(2, 2, this.timerange)
      } else if (this.selectedKeys === 'send1') {
        console.log('send 1 ---------', this.formLabel)
        this.formLabel.splice(1, 4, this.smg_code)
        this.formLabel.splice(2, 3, this.timerange)
      } else if (this.selectedKeys === 'send1') {
        console.log('send 1 ---------', this.formLabel)
        this.formLabel.splice(1, 4, this.smg_code)
        this.formLabel.splice(2, 3, this.timerange)
      } else if (this.selectedKeys === 'nop1' || this.selectedKeys === 'nop2') {
        this.formLabel.splice(1, 3, this.org_id)
        this.formLabel.splice(2, 3, this.timerange)
      } else if (this.selectedKeys === 'nop3') {
        this.formLabel.splice(1, 3, this.org_id)
        this.formLabel.splice(2, 3, {
          model: 'hh',
          label: 'hh24'
        })
        this.formLabel.splice(3, 3, {
          model: 'mi',
          label: 'mi'
        })
        this.formLabel.splice(4, 3, this.timerange)
      } else if (this.selectedKeys === '黑模板') {
        this.formLabel.splice(1, 4, this.signature)
      } else if (this.selectedKeys === '单个签名') {
        this.formLabel.splice(1, 3, this.user_id)
        this.formLabel.splice(2, 3, this.signature)
        this.formLabel.splice(3, 3, this.timerange)
      }
    },
    selectChange(value) {
      console.log('--> select value', value)
      if (value === '提交速度统计') {
        this.formLabel.splice(2, 2, {
          model: 'smg_code',
          label: '通道'
        })
      } else if (value === '成功率' || value === '回执率') {
        this.formLabel.splice(1, 3, this.timerange)
      } else if (value === '省份通道成功率') {
        this.formLabel.splice(1, 1, this.smg_code)
        this.formLabel.splice(2, 1, {
          model: 'province',
          label: '省份'
        })
        this.formLabel.splice(3, 1, this.timerange)
      } else if (value === '通道统计') {
        this.formLabel.splice(1, 1, this.smg_code)
        this.formLabel.splice(2, 2, this.timerange)
      } else if (value === '用户统计' || value === '签名统计') {
        this.formLabel.splice(1, 1, this.user_id)
        this.formLabel.splice(2, 2, this.timerange)
      } else if (value === '内容规律') {
        this.formLabel.splice(1, 1, this.user_id)
        this.formLabel.splice(2, 1, {
          model: 'report_status',
          label: 'status'
        })
        this.formLabel.splice(3, 1, this.timerange)
      } else if (value === 'area') {
        console.log('area 1111111111111111111111111111111111111')
        this.formLabel.splice(1, 1, this.smg_code)
        this.formLabel.splice(2, 1, this.user_id)
        this.formLabel.splice(3, 1, {
          model: 'report_code',
          label: 'report_code'
        })
        this.formLabel.splice(4, 1, {
          model: 'report_status',
          label: 'status'
        })
        this.formLabel.splice(5, 1, this.timerange)
      } else if (value === '重推表') {
        this.formLabel.splice(1, 2)
      } else if (value === '机器人是否审核慢') {
        this.formLabel.splice(1, 4)
      } else if (value === '10秒内') {
        this.formLabel.splice(1, 2, {
          model: 'check_person',
          label: 'Check Person'
        })
      } else if (value === 'check1') {
        this.formLabel.splice(1, 3, {
          model: 'check_person',
          label: 'Check Person'
        })
        this.formLabel.splice(2, 2, this.timerange)
      } else if (value === '提交速度统计2') {
        this.formLabel.splice(2, 1, this.smg_code)
        this.formLabel.splice(3, 2, this.timerange)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.el-select-dropdown {
  font-size: 12px;
}
.select {
  .el-select-dropdown__item {
    font-size: 11px;
  }
}
</style>
